<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期级联菜单</title>
    <script>
        window.onload = function () {
            // 加载年份
            let year = document.getElementById("year");
            // 获取当前年份
            let currentYear = new Date().getFullYear();
            // 开始加载年份
            for (let i = currentYear - 30; i <= currentYear; i++) {
                year[year.length] = new Option(i + "年", i);
            }

            // 加载月份
            let month = document.getElementById("month");
            // 月份为1-12月
            for (let i = 1; i <= 12; i++) {
                month[month.length] = new Option(i + "月", i)
            }
        }

        function loadDay() {
            // 获取当前所选择的年份与月份的服务器值
            let year = document.getElementById("year").value;
            let month = document.getElementById("month").value;
            // 获取天数下拉列的节点
            let day = document.getElementById("day");

            // 开始加载天数前,清除原来的记录
            day.length = 1;

            // 只要有任意一个下拉列没有选择有效的数据,则不需要加载天数
            if (year == -1 || month == -1) {
                // 退出
                return;
            }

            // 根据已知年份与月份求出天数
            let countDay = new Date(year, month, 0).getDate();
            for (let i = 1; i <= countDay; i++) {
                day[day.length] = new Option(i + "日", i);
            }
        }
    </script>
</head>
<body>
<!--
    需求一:在页面加载之后完成两个操作
        1.加载年份,其年份的值为当前年份的前三十年
        2.加载月份,月份的值为1-12
    需求二:加载天数
        当用户选择了合法的年份与月份之后,根据选择的年份与月份加载正确的天数
-->
<select id="year" onchange="loadDay()">
    <option value="-1">请选择年份</option>
</select>
<select id="month" onchange="loadDay()">
    <option value="-1">请选择月份</option>
</select>
<select id="day">
    <option value="-1">请选择天数</option>
</select>
</body>
</html>